<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 300px;
            border: 1px solid;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        ul{
            display: flex;
            width: 3500px;
            background-color: rebeccapurple;
            position: absolute;
            left: 0;
            top: 0;
        }
        li{
            list-style: none;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 40px;
            color: #000;
            width: 500px;
        }
        span{
            position: absolute;
            top: 50%;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid;
            transform: translateY(-50%);
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }

    </style>
</head>
<body>
    
    <div>
    <ul>
        
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>     
    </ul> 
   <span class="left" onclick="setx(-1,evevt)">></span>
    <span class="right" onclick="setx(1,event)"><</span>
</div>

<script>
    function rdc() {
        return  Math.floor(Math.random()*(255-0+1)+0)
    }
    // 改变li颜色
    let ul = document.querySelector('ul');  
    let li = ul.children
    for (let i = 0; i < li.length; i++) {
        li[i].style.background=`rgb(${rdc()},${rdc()},${rdc()})`
        
    }
    // 设置轮播图当前位置的全局变量
    let x =0
    // 定义一个设置x值得函数
    function setx (e ,event){
        console.log(event);
        
        // li中最后一个元素的下标
        let index = li.length-1
        // 修改x的值 并根据判断条件设置
        x+=e
        x>index?x=0:x;
        x<0?x=index:x;
        // 调用修改
        ul.style.left = x*-500+'px'
        // 停止定时
        if (event) {
            clearInterval(s1)
        }


    }
        // let s1 =setInterval(function(){
        //     setx(1)
        // },1000)
        let s1 = setInterval(setx,1000)

        // 重启定时器执行轮播
        let d1 = null
        function dong() {
            clearTimeout(d1)
            clearInterval(s1)
            di = setTimeout(function () {
            si = setInterval(setx,1000)
                
            },1000)
            }
        
</script>
</body>
</html>